<template>
  <div>
    <div class="container">
      <div class="header">
        <HeadContext></HeadContext>
      </div>
      <div class="top">
        <div class="leftTop">
          <LeftTop></LeftTop>
        </div>
        <div class="centerTop">
          <TopCenter></TopCenter>
        </div>
        <div class="rightTop">
          <RightTop></RightTop>
        </div>
      </div>
      <div class="center">
        <div class="leftCenter">
          <LeftCenter></LeftCenter>
        </div>
        <div class="centerCenter"></div>
        <div class="rightCenter">
          <RightCenter></RightCenter>
        </div>
      </div>
      <div class="bottom">
        <div class="leftBottom">
          <LeftBottom></LeftBottom>
        </div>
        <div class="centerBottom">
          <CenterBottom></CenterBottom>
        </div>
        <div class="rightBottom">
          <RightBottom></RightBottom>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftCenter from "../components/LeftCenter";
import LeftBottom from "../components/LeftBottom";
import RightCenter from "../components/RightCenter";
import RightTop from "../components/RightTop";
import CenterBottom from "../components/CenterBottom";
import TopCenter from "../components/TopCenter";
import LeftTop from "../components/LeftTop";
import RightBottom from "../components/RightBottom";
import HeadContext from "../components/HeadContext";

export default {
  name: 'index',
  components: {
    HeadContext,
    RightBottom,
    LeftTop,
    TopCenter,
    CenterBottom,
    RightTop,
    RightCenter,
    LeftBottom,
    LeftCenter
  },
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/var_";

.container {
  width: $container_width;
  height: $container_height;
  background-color: #0f1a2d;
  position: absolute;
  left: calc(50% - 480px);
  top: 50%;
  margin-top: -270px;
  padding: 12px;
  box-sizing: border-box;

  .leftTop, .leftCenter, .leftBottom, .rightTop, .rightCenter, .rightBottom {
    width: $left_chart;
    height: 100%;
    border: 1px solid #43b2f8;
    box-shadow: 0px 0px 12px #3d9dcf inset;
  }

  .leftTop {
    border: none;
  }

  .top {
    display: flex;
    width: 100%;
    height: $top_height;

    .leftTop {
      margin-right: 70px;
    }

    .centerTop {
      flex: 1;
    }

    .rightTop {
      margin-left: 70px;
    }
  }

  .center {
    display: flex;
    height: $center_height;
    margin-top: 10px;

    .leftCenter {
    }

    .centerCenter {
      flex: 1;
      height: 100%;
      background: url("../../src/assets/img/wanzhou_map.png") center center no-repeat;
      background-size: cover;
    }

    .rightCenter {
    }
  }

  .bottom {
    width: 100%;
    height: $bottom_height;
    margin-top: 10px;
    display: flex;

    .leftBottom {
      margin-right: 10px;

    }

    .centerBottom {
      flex: 1;
      border: 1px solid #43b2f8;
    }

    .rightBottom {
      margin-left: 10px;
    }
  }
}
</style>
